<script setup>
import { ref, onMounted,onBeforeUnmount } from 'vue'

import { useRoute} from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import router from '@/router'

const route= useRoute()
const userStore = useUserStore()
// 侧边栏状态管理
const isCollapsed = ref(false)

// 子菜单状态管理
const submenuOpen = ref({
  orderSource: false,
  finance: false,
  workOrder: false,
  employeeManage: false,
  customerManage: false,
  supplierManage: false,
  feedback: false,
  system: false
})

// 轮播图状态
const currentSlide = ref(0)
let slideInterval = null  // 注意：改为普通变量，避免ref监听

// 切换侧边栏展开/收起
const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value
}

// 切换子菜单
const toggleSubmenu = (key) => {
  submenuOpen.value[key] = !submenuOpen.value[key]
}

// 轮播图自动播
onMounted(() => {
  startSlideInterval()
})
const startSlideInterval = () => {
  slideInterval = setInterval(() => {
    currentSlide.value = (currentSlide.value + 1) % 3
  }, 5000)
}

// 清理定时器（组件销毁前）
onBeforeUnmount(() => {
  if (slideInterval) {
    clearInterval(slideInterval)
  }
})

const handleCommand = (cmd) => {
  if (cmd === 'logout') {
     ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        // 清除登录信息
        localStorage.removeItem('token')
        localStorage.removeItem('UserInfo')
         localStorage.removeItem('roleLogos')
        userStore.$reset() // 恢复 pinia 初始状态
        router.replace('/')
        ElMessage.success('已退出登录')
      })
      .catch(() => {
        ElMessage.info('已取消退出')
      })
  }
}
</script>
<template>
  <div class="app-container">
    <!-- 侧边栏：通过isCollapsed控制展开/收起 -->
    <aside class="sidebar" :class="{ 'collapsed': isCollapsed }">
      <div class="logo-container">
        <!-- <img src="https://picsum.photos/40/40" alt="系统Logo" class="logo-img" /> -->
        <span class="logo-text" v-if="!isCollapsed" >易腾工单系统</span>
      </div>

      <button class="toggle-btn" @click="toggleSidebar">
        <i class="icon" :class="isCollapsed ? 'icon-expand' : 'icon-collapse'"></i>
      </button>

      <nav class="menu">
        <ul>
           <li class="menu-item" :class="{ active: route.path === '/home' }">
             <router-link to="/home" class="menu-link">
               <el-icon><HomeFilled /></el-icon>
                <span v-if="!isCollapsed">首页</span>
             </router-link>
          </li>
          <li class="menu-item" :class="{ active: route.path === '/home/messageView' }">
             <router-link to="/home/messageView" class="menu-link"  >
              <el-icon><Message /></el-icon>
              <span v-if="!isCollapsed">消息提示</span>
            </router-link>
          </li>


          <!-- 其他菜单项保持不变 -->
          <li class="menu-item" :class="{ active: route.path === '/home/workorderList' || route.path ==='/home/selfWorkOrder' || route.path === '/home/customerWorkorder' || route.path ==='/home/archivedWorkorder' }">
            <div class="menu-link" @click="toggleSubmenu('workOrder')">
              <el-icon><Money /></el-icon>
              <span v-if="!isCollapsed">工单管理</span>
            </div>
            <ul class="submenu" v-show="submenuOpen.workOrder && !isCollapsed">
              <li :class="{ active: route.path === '/home/customerWorkorder' }">
                <router-link to="/home/customerWorkorder">客户工单</router-link>
              </li>
              <li :class="{ active: route.path === '/home/selfWorkOrder' }">
                <router-link to="/home/selfWorkOrder">自建工单</router-link>
              </li>
              <li :class="{ active: route.path === '/home/workorderList' }">
                <router-link to="/home/workorderList">工单列表</router-link>
              </li>
              <li :class="{ active: route.path === '/home/archivedWorkorder' }">
                <router-link to="/home/archivedWorkorder">归档工单</router-link>
              </li>
            </ul>
          </li>
          <li class="menu-item" :class="{ active: route.path === '/home/userList' || route.path === '/home/companyUser' || route.path === '/home/normalUser'}">
            <div class="menu-link" @click="toggleSubmenu('customerManage')">
              <el-icon><User /></el-icon>
              <span v-if="!isCollapsed">客户管理</span>
              <!-- <i class="icon icon-arrow" :class="submenuOpen.customerManage ? 'arrow-down' : 'arrow-right'"></i> -->
            </div>
            <ul class="submenu" v-show="submenuOpen.customerManage && !isCollapsed">
             <li :class="{ active: route.path === '/home/userList' }">
                <router-link to="/home/userList">客户档案</router-link>
              </li>
              <li :class="{ active: route.path === '/home/companyUser' }">
                <router-link to="/home/companyUser">企事业客户</router-link>
              </li>
              <li :class="{ active: route.path === '/home/normalUser' }">
                <router-link to="/home/normalUser">普通客户</router-link>
              </li>
            </ul>
          </li>
          <li class="menu-item" :class="{ active: route.path === '/home/employeeInfo'}">
            <div class="menu-link" @click="toggleSubmenu('employeeManage')">
              <el-icon><UserFilled /></el-icon>
              <span v-if="!isCollapsed">用户管理</span>
              <!-- <i class="icon icon-arrow" :class="submenuOpen.employeeManage ? 'arrow-down' : 'arrow-right'"></i> -->
            </div>
            <ul class="submenu" v-show="submenuOpen.employeeManage && !isCollapsed">
             <li :class="{ active: route.path === '/home/employeeInfo' }">
                <router-link to="/home/employeeInfo">员工档案</router-link>
              </li>
            </ul>
          </li>
          <li class="menu-item" :class="{ active: route.path === '/home/supplierInfo' || route.path ==='/home/productType' || route.path ==='/home/productInfo' }">
            <div class="menu-link" @click="toggleSubmenu('supplierManage')">
              <el-icon><Shop /></el-icon>
              <span v-if="!isCollapsed">供应商管理</span>
            </div>
            <ul class="submenu" v-show="submenuOpen.supplierManage && !isCollapsed">
              <li :class="{ active: route.path === '/home/supplierInfo' }">
                <router-link to="/home/supplierInfo">供应商</router-link>
              </li>
              <li :class="{ active: route.path === '/home/productType' }">
                <router-link to="/home/productType">产品种类</router-link>
              </li>
              <li :class="{ active: route.path === '/home/productInfo' }">
                <router-link to="/home/productInfo">产品信息</router-link>
              </li>
            </ul>
          </li>
           <li class="menu-item" :class="{ active: route.path === '/home/permissionUserList' || route.path === '/home/roleList' || route.path === '/home/permissionList' }">
            <div class="menu-link" @click="toggleSubmenu('finance')">
              <el-icon><Key /></el-icon>
              <span v-if="!isCollapsed">权限管理</span>
              <!-- <i class="icon icon-arrow" :class="submenuOpen.finance ? 'arrow-down' : 'arrow-right'"></i> -->
            </div>
            <ul class="submenu" v-show="submenuOpen.finance && !isCollapsed">
              <li :class="{ active: route.path === '/home/permissionUserList' }">
                <router-link to="/home/permissionUserList">用户列表</router-link>
              </li>
              <li :class="{ active: route.path === '/home/roleList' }">
                <router-link to="/home/roleList">角色列表</router-link>
              </li>
              <li :class="{ active: route.path === '/home/permissionList' }">
                <router-link to="/home/permissionList">权限列表</router-link>
              </li>
            </ul>
          </li>
          <!-- <li class="menu-item">
            <div class="menu-link" @click="toggleSubmenu('feedback')">
              <el-icon><Finished /></el-icon>
              <span v-if="!isCollapsed">评价回访</span> -->
              <!-- <i class="icon icon-arrow" :class="submenuOpen.feedback ? 'arrow-down' : 'arrow-right'"></i> -->
            <!-- </div>
            <ul class="submenu" v-show="submenuOpen.feedback && !isCollapsed">
              <li><a href="#">评价列表</a></li>
              <li><a href="#">满意度统计</a></li>
              <li><a href="#">回访计划</a></li>
              <li><a href="#">问题跟进</a></li>
            </ul>
          </li> -->





        </ul>
      </nav>
    </aside>
    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 顶部导航栏 -->
      <header class="main-header">
        <div class="header-left">
        </div>
        <div class="header-right">
          <el-dropdown trigger="hover" @command="handleCommand">
            <div class="user-info">
              <img src="https://picsum.photos/32/32" alt="用户头像" class="user-avatar" />
              <span class="username">{{ userStore.UserInfo?.userName || '管理员' }}</span>
              <i class="icon icon-chevron-down"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </header>

      <!-- 动态内容区域：路由出口，渲染不同页面 -->
      <router-view />
    </main>
  </div>
</template>

<style scoped>
/* 保留原有样式，确保布局正常 */
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 240px;
  background-color:#466e89;
  color: #ecf0f1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
  /* 新增以下样式 */
  height: 100vh; /* 固定高度为视口高度 */
  overflow-y: auto; /* 垂直方向内容超出时显示滚动条 */
  overflow-x: hidden; /* 禁止水平滚动 */
}

/* 保持折叠状态的滚动行为一致 */
.sidebar.collapsed {
  width: 64px;
  /* 继承父类的滚动设置，无需额外修改 */
}

.logo-container {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.logo-text {
  font-size: 28px;
  font-weight: 600;
  transition: opacity 0.3s ease;
  align-items: center;
  justify-content: center;
}

.toggle-btn {
  width: 40px;
  height: 40px;
  margin: 12px auto;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 菜单样式 */
.menu {
  padding-top: 10px;
}

.menu-item {
  list-style: none;
  margin-bottom: 4px;
}

.menu-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #bdc3c7;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.menu-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.menu-item.active .menu-link {
  background-color: #3498db;
  color: white;
}

.menu-item.active .menu-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: #f1c40f;
}

.submenu {
  background-color: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.submenu li {
  list-style: none;
}

.submenu a {
  display: block;
  padding: 10px 16px 10px 48px;
  color: #bdc3c7;
  text-decoration: none;
  transition: all 0.2s ease;
}
.submenu li.active a {
  color: white; /* 选中时的颜色 */
  font-weight: 500;
  background-color: #83a2d9; /* 可选：添加背景色区分 */
}

.submenu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  padding-left: 52px;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: #f5f7fa;
}

/* 顶部导航栏 */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-title {
  font-size: 20px;
  color: #333;
  font-weight: 600;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
}

.username {
  font-weight: 500;
  color: #333;
  margin-right: 8px;
}

.icon-chevron-down {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.notification-carousel {
  /* 1. 关键：使用 sticky 定位 */
  position: sticky;
  top: 0; /* 关键：相对于父容器（main-content）的顶部进行固定 */

  /* 2. 布局和外观 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  margin: 16px; /* 与内容区保持间距 */
  background-color: #466e89;
  color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);

  /* 3. 提高层级，确保不被其他内容覆盖 */
  z-index: 100;

}

.carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;         /* 确保是 flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中（如果需要） */
}

.carousel-indicators {
  position: absolute;
  bottom: 8px;
  right: 16px;
  display: flex;
  gap: 8px;
}

.carousel-indicators button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-indicators button.active {
  background-color: white;
  width: 24px;
  border-radius: 4px;
}

</style>
